{extend name="public/list_page"/}
{block name="content"}
<div class="layui-card">
    <div class="layui-card-body">
        <blockquote class="layui-elem-quote">
            温馨提示：
            <ul>
                <li>停用/删除时，下级菜单会一起停用/删除；</li>
                <li>名称前带 <i class="layui-icon">&#xe623;</i> 符号表示有子级，点击名称可展开；</li>
                <li>建议最多三级菜单，三级以后菜单显示并没有那么友好。</li>
            </ul>
        </blockquote>
        <div class="page-wrapper">
            <div class="demo-side">
                <table id="list"></table>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="custom"}
<script type="text/html" id="toolbar">
    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="expandAll">全部展开</button>
    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="foldAll">全部折叠</button>
</script>

<script type="text/html" id="isMenu">
    {{# if(d.is_menu == 1){}}
    <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" title="是否菜单">是</button>
    {{# } else {}}
    <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" title="是否菜单">否</button>
    {{# } }}

</script>

<script type="text/html" id="isDel">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|停用" lay-filter="isDel" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="barHandle">
    <button type="button" class="layui-btn handel-btn layui-btn-primary" lay-event="edit" title="编辑"><i class="fa fa-pencil-square-o"></i></button>
    <button type="button" class="layui-btn handel-btn layui-btn-normal" lay-event="add" title="添加子级"><i class="fa fa-plus"></i></button>
    <button type="button" class="layui-btn handel-btn layui-btn-del" lay-event="del" title="删除"><i class="fa fa-trash-o"></i></button>
</script>
{/block}

{block name="js"}
<script>
    layui.config({
        base: '__STATIC__/js/'
    }).use(['layer', 'util', 'treeTable','form'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            util = layui.util,
            form = layui.form,
            treeTable = layui.treeTable;
        $('body').removeClass('layui-hide');

        // 渲染表格
        var ruleTreeTb = treeTable.render({
            elem: '#list',
            method:'post',
            url: "{:url('rule/index')}",
            toolbar:"#toolbar",
            defaultToolbar: ['filter'],
            tree: {
                // iconIndex: 0,//三角形图标在哪一列，从0开始
                isPidData: true,
                idName: 'id',
                pidName: 'pid',
                openName:'open',
                // getIcon:function (d) {
                //     console.log(d)
                //     //自定义图标 ew-tree-icon 是必须的
                //     if (d.children&&d.children.length>0){
                //         return '<i class="ew-tree-icon layui-icon">&#xe66b;</i>';
                //     }else {
                //         return '<i class="ew-tree-icon layui-icon">&#xe671;</i>';
                //     }
                // },
            },
            response:{
                statusCode:'suc'
            },
            cols: [[
                {field:'name',title:'名称'},
                {field:'rule',title:'url'},
                {field:'sort',title:'排序'},
                {field:'is_menu',title:'是否菜单',templet:'#isMenu'},
                {field:'status',title:'状态',templet: '#isDel'},
                // {field:'description',title:'描述'},
                {field:'right',title:'操作',align:'center',width:'20%',toolbar:'#barHandle'}
            ]]

        });

        //监听头部工具栏点击
        treeTable.on('toolbar(list)',function (obj) {
            if (obj.event == 'add') {
                xadmin.open('添加权限',"{:url('rule/add')}",500,600)
            }else if(obj.event == 'expandAll'){
                ruleTreeTb.expandAll();
            }else if(obj.event == 'foldAll'){
                ruleTreeTb.foldAll();
            }
        })

        // 监听工具列点击事件
        treeTable.on('tool(list)', function (obj) {
            var event = obj.event;
            let id = obj.data.id;
            let url = '';
            if (event === 'del') {
                url = "{:url('rule/del')}"
                layer.confirm('确认删除？',{title:''},function () {
                    ajaxRequest(url,{id:id},function (res) {
                        if (res.code == 'suc') {
                            layer.msg(res.msg,{icon:icoSuc,time:msgShowTime},function () {
                                ruleTreeTb.refresh();
                            })
                        }else {
                            layer.msg(res.msg,{icon:icoErr,time:msgShowTime})
                        }
                    })
                });
            } else if (event === 'edit') {
                url = "{:url('rule/edit')}?id=" + id;
                xadmin.open('编辑权限',url,500,600)
            }else if (event === 'add'){
                url = "{:url('rule/addSon')}?pid=" + id;
                xadmin.open('添加子级',url,500,600)
            }
        });

        //监听状态操作
        form.on('switch(isDel)', function(obj){
            let id = this.value
            let tip = ''
            let action = ''
            if (obj.elem.checked == true){
                tip = '确定启用该权限？'
                action = 'on'
            } else {
                tip = '确定停用该权限？'
                action = 'off'
            }
            layer.confirm(tip,{title:''},function () {
                var load = layer.load(1,{shade:[0.5,'#FFF']});
                $.ajax({
                    type:"POST",
                    url:"{:url('rule/changeStatus')}",
                    data:{
                        action:action,
                        id:id
                    },
                    dataType:"JSON",
                    success:function (res) {
                        if (res.code == 'suc') {
                            layer.msg(res.msg,{icon:icoSuc,time:msgShowTime},function () {
                                ruleTreeTb.reload();
                            })
                        }else {
                            layer.msg(res.msg,{icon:icoErr,time:msgShowTime})
                        }
                    }

                })
                layer.close(load)
            })
            // layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
        });

    });
</script>
{/block}